<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/css/index.css"/>
    <script src="/js/jquery-3.4.1.js"></script>
    <!--	<script src="/js/main.js"></script>-->
    <script type="text/javascript" src="/js/mz-packed.js"></script>
    <title th:text="${setting.siteName}+'-图书详情'">易书网</title>
</head>
<body>

<!--引入   头部片段 -->
<div th:replace="mall/common/mall_common :: header"></div>


<div class="main">
    <div class="container clearfix">
        <div class="bread">当前位置：
            <a href="index.html">首页</a> >
            <a href="list.html">教材区</a> >
            <a href="detail.html">图书详情</a>
        </div>
        <div class="main-left fl clearfix">
            <div class="zoom-wrap fl">
                <div id="zoom">
                    <a href="images/ps.jpg" title="" class="MagicZoom">
                        <img class="bzoom" th:src="${book.imageUrl}" src="/images/ps.jpg" width="300" height="424"/>
                    </a>
                </div>
            </div>
            <div class="attr fl">
                <p>书名：<span th:text="${book.bookName}">Photoshop cs中文版标准教程</span></p>
				<p th:if="${book.isdiscount==2}">价格: <s th:text="'￥'+${book.price}"></s><strong th:text="'￥'+${book.discount}"></strong></p>
				<p th:if="${book.isdiscount==1}">价格: <strong th:text="'￥'+${book.price}"></strong></p>
                <p th:each="pac:${book.pac}" ><span th:text="'所属'+${pac.parentName}+': '">所属学校：</span><span th:text="${pac.childName}">江西师范大学</span></p>
                <p>发布人：<span th:text="${book.publisherName}"></span></p>
                <p>发布时间：<span th:text="${#dates.format(book.createTime, 'yyyy-MM-dd')}"></span></p>
				<div th:if="${session.mallUser.id == book.publisher}">
					<a href="javascript:0;" class="pay" >无法购买</a>
				</div>
				<div ng-app="app" ng-controller="QrcodeController"  th:if="${session.mallUser.id != book.publisher}">
                    <a href="javascript:0;" class="pay" id="button" th:ng-click="'getQrCode('+${book.id}+')'"  >立即购买</a>
                    <div >
                        <img ng-show="src" style="display: none" id="qrcode" ng-src="{{src}}" />
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="description clearfix">
                <h2>发布者描述</h2>
                <p th:text="${book.bookDescribe}">《PHOTOSHOP CS6中文版标准教程》是一本计算机类教程图书，针对最新版Photoshop
                    CS6中文版进行讲解，内全面而精准，包括软件基本操作、高级操作、
					色彩调整、绘制与修饰图像、图层操作、通道应用、滤镜效果、动作与自动化等方面的知识，
					重点讲解了软件的操作方法，另外每一章都添加了“课堂练习”“行业秘籍”和“实战案例”三个补充内容，
					丰富了本书的知识性。最后一章详细讲解了“质感电影海报”“真实肖像插画”“房地产DM单““艺术图像封面”“沐浴乳产品包装
					”“个性博客首页”几个综合案例，以满足读者更高层次上的学习需求。
                    《PHOTOSHOP CS6中文版标准教程》由蔡克中、晓帆、王海波编写。</p>
            </div>


        </div>
        <div class="main-right fr">
            <h2>同类推荐</h2>
            <div class="tj">
                <ul>
                    <li class="fore1" th:each="books:${alikeBook}">
                        <div class="p-img"><a href="detail.html" th:href="'detail.html?id='+${books.id}"> <img th:src="${books.imageUrl}" height="150" width="auto" src="images/siji.jpg"
                                                                       class=""> </a></div>
                        <div class="p-name"><a href="detail.html" th:href="'detail.html?id='+${books.id}" th:text="${books.bookName}">怎探古人何所思 精神文化考古理论与实践探索 历史 何驽 正版图书</a></div>
                        <div class="p-price" th:if="${books.isdiscount==2}"><s th:text="'￥'+${books.price}">￥50</s><strong class="J-p-1701273745" th:text="'￥'+${books.discount}">￥146.20</strong></div>
                        <div class="p-price" th:if="${books.isdiscount==1}"><strong class="J-p-1701273745" th:text="'￥'+${books.price}">￥146.20</strong></div>
                    </li>

                </ul>
            </div>
        </div>

    </div>
</div>


<!--引入 尾部片段-->
<div th:replace="mall/common/mall_common :: footer"></div>


<script src="/layui/layui.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script>
<script>
    $("#dataList").click(function () {
        var data = $("#bookName").val();
        console.log(data)
        location.href="/mall/list.html?bookName="+data;
        return false;
    })
    layui.use(['element', 'form', 'table', 'layer', 'laydate', 'layedit'], function () {
        var element = layui.element;
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var layedit = layui.layedit;

        setTimeout(function () {
            $("#qrcode").attr("display",true);
            $("#button").click(function () {
                layer.open({
                    type: 1,
                    title: false,
                    closeBtn: 0,
                    area: ['auto'],
                    skin: 'layui-layer-nobg', //没有背景色
                    shadeClose: true,
                    content: $('#qrcode')
                });
            })
        },500)

    });


	/*<![CDATA[*/
	var app = angular.module('app', []);
	app.controller('QrcodeController', function ($rootScope, $scope, $http) {
		//二维码图片src
		$scope.src = null;

		//获取二维码
		$scope.getQrCode = function (id) {
			$http.get('/mall/getQrCode/' + id).success(function (data) {
				if (!data || !data.mallId || !data.image)
					return;
				$scope.src = 'data:image/png;base64,' + data.image
				$scope.getResponse(data.mallId, id)
			});
		}

		//获取登录响应
		$scope.getResponse = function (mallId, id) {
			$http.get('/mall/getResponse/' + mallId +'/' +id).success(function (data) {
				//一秒后，重新获取登录二维码
				if (!data || !data.success) {
				    alert("已超时")
					//setTimeout($scope.getQrCode(id), 1000);
					return;
				}
				//登录成功，进去首页
				location.href = '/mall/bought.html'

			}).error(function (data, status) {
				console.log(data)
				console.log(status)
				//一秒后，重新获取登录二维码
				setTimeout($scope.getQrCode(id), 1000);
			})
		}


	});
	/*]]>*/
</script>
</body>
</html>